<template>
  <div class="container">
    <div ref="diagramDiv" class="diagramDiv"></div>

    <div class="legend">
      设备状态：
      <div class="item" v-for="item in colorList" :key="item.value">
        <div class="icon" :style="{ background: item.color }"></div>
        <div class="value">{{ item.value }}</div>
      </div>

      <!-- <el-progress style="width: 200px;" :text-inside="true" :stroke-width="26" :percentage="percent"></el-progress> -->
    </div>

    <div class="warningInfo">
      <div
        class="title"
        v-show="
          deviceInfo.mechanicalMatrixMsg ||
          deviceInfo.serverMsg ||
          deviceInfo.mechaniDVBMsg ||
          deviceInfo.mechaniPinpuMsg ||
          deviceInfo.antennaMsg
        "
      >
        设备异常信息
      </div>
      <div
        class="item"
        v-for="(value, key) in deviceInfo"
        :key="key"
        v-show="value"
      >
        {{ mapDeviceName[key] }}：{{ value }}
      </div>
    </div>
  </div>
</template>

<script>
// 引入 gojs 插件
import go from 'gojs'
import { searchMachineStatusAPI } from '@/api/deviceTopology.js'
// import axios from 'axios'
export default {
  name: 'DeviceTopology',
  data () {
    return {
      timer: null,

      percent: 0,
      diagram: null,
      colorList: [
        {
          color: '#67c23a',
          value: '状态正常'
        },
        {
          color: '#e6a23c',
          value: '设备异常'
        },
        {
          color: '#f56c6c',
          value: '设备离线'
        }
      ],
      deviceStatus: {
        mechanicalMatrixStatus: 2, //  4*8矩阵
        serverStatus: 2, // 信号分析服务
        mechaniDVBStatus: 2, // 高速DVB信号解调器
        mechaniPinpuStatus: 2, // 宽带信号采集设备
        antennaStatus: 2 // 可搬移式2.4快速跟踪天线
      },
      deviceInfo: {
        mechanicalMatrixMsg: '',
        serverMsg: '',
        mechaniDVBMsg: '',
        mechaniPinpuMsg: '',
        antennaMsg: ''
      },
      mapDeviceName: {
        mechanicalMatrixMsg: 'L频段信号交换矩阵',
        serverMsg: '信号存储分析处理设备',
        mechaniDVBMsg: '高速DVB信号解调设备',
        mechaniPinpuMsg: '宽带信号采集设备',
        antennaMsg: '可搬移式2.4米快速跟踪天线'
      }
    }
  },
  mounted () {
    this.searchMachineStatus()
    this.initTuoPu()

    this.timer = setInterval(() => {
      this.searchMachineStatus()
    }, 5000)

    // 查询DVB设备状态
    /*
      为什么要这里引入axios而不是封装在api文件中统一引入？
      答：因为api中引入的axios做了全局的baseUrl配置，且配的是绝对地址，无法配合vue.config.js中配置的proxy代理解决跨域问题
        所以如果想解决跨域同时请求另外一个url，只能重新引入一个新的axios然后单独设置url
    */
    /* axios({
      url: '/api/dvb/SystemConfig/getStatus',
      method: 'get'
    })
      .then(({ data: { data } }) => {
        console.log('dvb设备的状态', data)
      })
      .catch((err) => {
        console.log(err)
      }) */

    // 解决 el-progress的进度条满了重置为0时，仍有动画效果导致渲染效果不佳的问题
    /* const myProgress = document.querySelector('.el-progress-bar__inner')
    // console.dir(myProgress.style.transition)
    setInterval(() => {
      if (this.percent >= 100) {
        myProgress.style.transition = 'none'
        this.percent = 0
      } else {
        this.percent += 2
        if (myProgress.style.transition == 'none') {
          myProgress.style.transition = 'width .6s ease'
        }
      }
    }, 100) */
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    // 初始化拓扑图
    initTuoPu () {
      const $ = go.GraphObject.make
      this.diagram = $(go.Diagram, this.$refs.diagramDiv, {
        // 'undoManager.isEnabled': true, // 开启撤销功能 用户可以通过 ctrl z 撤销操作
        initialAutoScale: go.Diagram.Uniform, // 初次加载自适应容器大小
        isReadOnly: true, // 只读状态
        // 'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom // 滚轮缩放
        'toolManager.mouseWheelBehavior': null, // 滚轮缩放
        allowDragOut: false, // 禁止将节点拖出图表
        'animationManager.isEnabled': false // 禁用图表加载动画
      })

      /* // 做一些初始化配置 => 这里设置没用，因为下面的model是重新new的
      this.diagram.model.linkFromPortIdProperty = 'fromPort'
      this.diagram.model.linkToPortIdProperty = 'toPort' */
      // 禁用画布的平移工具
      this.diagram.toolManager.panningTool.isEnabled = false
      this.diagram.toolManager.actionTool.isEnabled = false

      // 定义节点模板
      this.diagram.nodeTemplate = $(
        go.Node,
        // 'Auto', // 自动分布
        'Vertical', // 垂直分布
        {
          locationSpot: go.Spot.Center, // 默认居中
          selectable: false,
          movable: false,
          // 添加点击事件处理
          click: (e, node) => {
            /* const data = node.data
            if (data.key === '宽带信号采集设备') {
              this.$router.push('/remoteDesktop') // Vue路由跳转
            } */
          }
        },
        new go.Binding('location', 'loc', go.Point.parse),
        $(
          go.Panel,
          'Auto',
          {
            width: 280,
            height: 120
          },
          new go.Binding('width', 'width'),
          new go.Binding('height', 'height'),
          // 形状容器
          $(
            go.Shape,
            'RoundedRectangle',
            {
              width: 280,
              height: 120,
              // fill: '#fff',
              // stroke: '#e05848', // 边框颜色
              strokeWidth: 0 // 边框宽度
            },
            new go.Binding('fill', 'background'),
            new go.Binding('width', 'width'),
            new go.Binding('height', 'height')
          ),
          $(
            go.Panel,
            'Auto',
            {
              background: 'transparent',
              stretch: go.GraphObject.Fill
            },
            new go.Binding('margin', 'picMargin'),
            $(
              go.Picture,
              {
                stretch: go.GraphObject.Fill
              },
              new go.Binding('source', 'source'),
              new go.Binding('width', 'picWidth'),
              new go.Binding('height', 'picHeight')
              /* new go.Binding('height', '', (o, e) => {
                  return o.height - 40
                }) */
            )
          ),
          // 文本容器 => 设备名称
          $(
            go.TextBlock,
            {
              // margin: new go.Margin(40, 20, 40, 20),
              stroke: '#282c34',
              font: 'bold 18px 楷体'
              // wrap: go.TextBlock.WrapFit // 设置自动换行
            },
            new go.Binding('text', 'key'),
            new go.Binding('stroke', 'textColor'),
            new go.Binding('margin', 'textMargin')
          ),
          // 定义位于下方的端口容器
          $(
            go.Panel,
            'Horizontal',
            {
              width: 220,
              itemTemplate: $(
                go.Panel,
                'Horizontal',
                {
                  margin: new go.Margin(105, 0, 0, 30),
                  _side: 'bottom',
                  background: 'transparent',
                  fromLinkable: true,
                  toLinkable: true,
                  cursor: 'pointer',
                  width: 110,
                  fromLinkableSelfNode: true,
                  toLinkableSelfNode: true
                },
                new go.Binding('margin', 'margin'),
                $(
                  go.Shape,
                  'Rectangle',
                  {
                    figure: 'Ellipse',
                    // stroke: 'black',
                    strokeWidth: 2,
                    width: 10,
                    height: 10,
                    margin: new go.Margin(0, 1),
                    fill: 'transparent',
                    fromSpot: go.Spot.Bottom, // 指定连线从源节点的哪个位置出发
                    toSpot: go.Spot.Bottom,
                    fromLinkable: true,
                    toLinkable: true
                  },
                  new go.Binding('portId', 'portId'),
                  new go.Binding('stroke', 'portColor')
                ),
                $(
                  go.TextBlock,
                  {
                    width: 40,
                    margin: new go.Margin(0, 2),
                    stretch: go.GraphObject.Horizontal,
                    font: 'bold 11px sans-serif',
                    wrap: go.TextBlock.None,
                    overflow: go.TextBlock.OverflowEllipsis,
                    // and disallow drawing links from or to this text:
                    fromLinkable: false,
                    toLinkable: false,
                    // text: 'title',
                    stroke: '#ebf2f3'
                  },
                  // new go.Binding('text', 'portId')
                  new go.Binding('text', 'protText')
                )
              )
            },
            new go.Binding('itemArray', 'bottomArray')
          ),
          // 定义位于上方的端口容器
          $(
            go.Panel,
            'Horizontal',
            {
              width: 220,
              itemTemplate: $(
                go.Panel,
                'Horizontal',
                {
                  margin: new go.Margin(0, 15, 105, 15),
                  _side: 'top',
                  background: 'transparent',
                  fromLinkable: true,
                  toLinkable: true,
                  cursor: 'pointer',
                  width: 55,
                  fromLinkableSelfNode: true,
                  toLinkableSelfNode: true
                },
                new go.Binding('margin', 'margin'),
                $(
                  go.Shape,
                  'Rectangle',
                  {
                    figure: 'Ellipse',
                    // stroke: 'black',
                    strokeWidth: 2,
                    width: 10,
                    height: 10,
                    margin: new go.Margin(0, 1),
                    fill: 'transparent',
                    fromSpot: go.Spot.Top, // 指定连线从源节点的哪个位置出发
                    toSpot: go.Spot.Top,
                    fromLinkable: true,
                    toLinkable: true
                  },
                  new go.Binding('portId', 'portId'),
                  new go.Binding('stroke', 'portColor')
                ),
                $(
                  go.TextBlock,
                  {
                    width: 45,
                    margin: new go.Margin(0, 2),
                    stretch: go.GraphObject.Horizontal,
                    font: 'bold 11px sans-serif',
                    wrap: go.TextBlock.None,
                    overflow: go.TextBlock.OverflowEllipsis,
                    // and disallow drawing links from or to this text:
                    fromLinkable: false,
                    toLinkable: false,
                    // text: 'title',
                    stroke: '#ebf2f3'
                  },
                  new go.Binding('stroke', 'textColor'),
                  // new go.Binding('text', 'portId')
                  new go.Binding('text', 'protText')
                )
              )
            },
            new go.Binding('itemArray', 'topArray')
          ),
          // 定义位于左方的端口容器
          $(
            go.Panel,
            'Vertical',
            {
              width: 280,
              itemTemplate: $(
                go.Panel,
                'Horizontal',
                {
                  margin: new go.Margin(20, 225, 20, 0),
                  _side: 'left',
                  background: 'transparent',
                  fromLinkable: true,
                  toLinkable: true,
                  cursor: 'pointer',
                  width: 50,
                  fromLinkableSelfNode: true,
                  toLinkableSelfNode: true
                },
                new go.Binding('margin', 'margin'),
                $(
                  go.Shape,
                  'Rectangle',
                  {
                    figure: 'Ellipse',
                    stroke: 'black',
                    strokeWidth: 2,
                    width: 10,
                    height: 10,
                    margin: new go.Margin(0, 1),
                    fill: 'transparent',
                    fromSpot: go.Spot.Left, // 指定连线从源节点的哪个位置出发
                    toSpot: go.Spot.Left,
                    fromLinkable: true,
                    toLinkable: true
                  },
                  new go.Binding('portId', 'portId'),
                  new go.Binding('stroke', 'portColor')
                ),
                $(
                  go.TextBlock,
                  {
                    width: 40,
                    margin: new go.Margin(0, 2),
                    stretch: go.GraphObject.Horizontal,
                    font: 'bold 11px sans-serif',
                    wrap: go.TextBlock.None,
                    overflow: go.TextBlock.OverflowEllipsis,
                    // and disallow drawing links from or to this text:
                    fromLinkable: false,
                    toLinkable: false,
                    // text: 'title',
                    stroke: '#ebf2f3'
                  },
                  new go.Binding('stroke', 'textColor'),
                  // new go.Binding('text', 'portId')
                  new go.Binding('text', 'protText')
                )
              )
            },
            new go.Binding('width', 'leftWidth'),
            new go.Binding('itemArray', 'leftArray')
          ),
          // 定义位于右方的端口容器
          $(
            go.Panel,
            'Vertical',
            {
              width: 280,
              itemTemplate: $(
                go.Panel,
                'Horizontal',
                {
                  margin: new go.Margin(20, 0, 20, 235),
                  _side: 'right',
                  background: 'transparent',
                  fromLinkable: true,
                  toLinkable: true,
                  cursor: 'pointer',
                  width: 50,
                  fromLinkableSelfNode: true,
                  toLinkableSelfNode: true
                },
                new go.Binding('margin', 'margin'),
                $(
                  go.TextBlock,
                  {
                    width: 32,
                    textAlign: 'right',
                    margin: new go.Margin(0, 0),
                    stretch: go.GraphObject.Horizontal,
                    font: 'bold 13px sans-serif',
                    wrap: go.TextBlock.None,
                    overflow: go.TextBlock.OverflowEllipsis,
                    // and disallow drawing links from or to this text:
                    fromLinkable: false,
                    toLinkable: false,
                    // text: 'title',
                    stroke: '#ebf2f3'
                  }
                  // new go.Binding('text', 'portId')
                ),
                $(
                  go.Shape,
                  'Rectangle',
                  {
                    figure: 'Ellipse',
                    stroke: 'black',
                    strokeWidth: 2,
                    width: 10,
                    height: 10,
                    margin: new go.Margin(0, 1),
                    fill: 'transparent',
                    fromSpot: go.Spot.Right, // 指定连线从源节点的哪个位置出发
                    toSpot: go.Spot.Right,
                    fromLinkable: true,
                    toLinkable: true
                  },
                  new go.Binding('portId', 'portId'),
                  new go.Binding('stroke', 'portColor')
                )
              )
            },
            new go.Binding('itemArray', 'rightArray')
          )
        ),
        // 新增：设备状态指示器
        $(
          go.Panel,
          'Horizontal',
          {
            alignment: go.Spot.Bottom,
            alignmentFocus: go.Spot.Center,
            margin: new go.Margin(2, 15, 0, 0)
          },
          $(go.TextBlock, {
            text: '当前状态：',
            stroke: '#282c34',
            font: 'bold 16px 楷体',
            margin: new go.Margin(4, 0, 0, 0)
          }),
          $(
            go.Shape,
            'Circle',
            {
              width: 18,
              height: 18,
              stroke: 'transparent' // 边框颜色
            },
            new go.Binding('fill', 'deviceStatus')
          )
        )
      )

      // 设置连线模板
      this.diagram.linkTemplate = $(
        go.Link,
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.None, // 设置交叉线交叉部分的处理方式
          corner: 5 // 连线拐角处的弧度
        },
        new go.Binding('fromEndSegmentLength', 'fromEndSegmentLength'),
        $(
          go.Shape,
          new go.Binding('stroke', 'color'), // 连线颜色
          new go.Binding('strokeWidth', 'thick')
        ),
        $(
          go.TextBlock,
          {
            stroke: '#61a3be',
            font: 'bold 13px sans-serif',
            segmentOffset: new go.Point(3, 13), // 偏移量，使文字不与连线重叠
            // segmentIndex: 0.5 // 控制文字在连线上的位置。设置为 0.5 表示文字显示在连线的中点
            segmentOrientation: go.Link.OrientUpright // 控制文字相对于连线的方向
          },
          new go.Binding('text', 'text') // 连线上的文字
        ),
        $(
          go.Shape,
          {
            toArrow: 'Standard', // 设置箭头形状
            strokeWidth: 1
            // fill: null // 定义箭头颜色
          },
          new go.Binding('fill', 'color'),
          new go.Binding('stroke', 'color')
        )
      )

      // 下面的代码和上面的配置是等效的
      /* const json = {
        class: 'GraphLinksModel',
        linkFromPortIdProperty: 'fromPort',
        linkToPortIdProperty: 'toPort',
        nodeDataArray,
        linkDataArray
      }
      this.diagram.model = go.Model.fromJson(json) */
    },
    linkTuoPu () {
      const nodeDataArray = [
        {
          key: '可搬移式2.4米快速跟踪天线',
          deviceStatus: this.colorList[this.deviceStatus.antennaStatus].color,
          background: 'transparent',
          // width: 250,
          height: 280,
          // picWidth: 250,
          // picHeight: 300,
          textMargin: new go.Margin(0, 5, 220, 5),
          // picMargin: new go.Margin(20, 15, 15, 15),
          // background: '#5dabd9',
          loc: '-600, -280',
          bottomArray: [
            {
              portId: 'out1',
              portColor: '#000',
              margin: new go.Margin(260, 0, 0, 20)
            },
            {
              portId: 'out2',
              portColor: '#000',
              margin: new go.Margin(260, 0, 0, 20)
            }
          ],
          rightArray: [
            {
              portId: 'in1',
              portColor: '#000',
              margin: new go.Margin(0, 0, 50, 230)
            }
          ],
          source: './img/2.4天线.png' // ./ 是plubic目录
        },
        {
          key: '宽带信号采集设备',
          deviceStatus: this.colorList[this.deviceStatus.mechaniPinpuStatus].color,
          background: 'transparent',
          height: 100,
          textMargin: new go.Margin(0, 5, 60, 5),
          textColor: '#f5f5f5',
          // picMargin: new go.Margin(25, 15, 10, 15),
          loc: '100, -180',
          leftArray: [
            { portId: 'in1', portColor: '#000' },
            { portId: 'in2', portColor: '#000' }
          ],
          rightArray: [{ portId: 'out1', portColor: '#000' }],
          source: './img/采集截图.jpg' // ./ 是plubic目录
        },
        {
          key: 'L频段信号交换矩阵',
          deviceStatus: this.colorList[this.deviceStatus.mechanicalMatrixStatus].color,
          background: 'transparent',
          height: 100,
          textMargin: new go.Margin(0, 5, 45, 5),
          textColor: '#f5f5f5',
          // picMargin: new go.Margin(30, 15, 15, 15),
          loc: '-200 0',
          topArray: [
            {
              portId: 'in1',
              portColor: '#000',
              protText: 'RE_in',
              margin: new go.Margin(10, 0, 90, 15)
            },
            {
              portId: 'out3',
              portColor: '#000',
              protText: 'RE_out',
              margin: new go.Margin(10, 0, 90, 15)
            },
            {
              portId: 'out4',
              portColor: '#000',
              protText: 'RE_out',
              margin: new go.Margin(10, 0, 90, 15)
            }
          ],
          bottomArray: [
            {
              portId: 'out1',
              portColor: '#000',
              protText: 'RE_out',
              margin: new go.Margin(90, 0, 10, 20)
            },
            {
              portId: 'out2',
              portColor: '#000',
              protText: 'RE_out',
              margin: new go.Margin(90, 0, 10, 20)
            }
          ],
          leftArray: [
            {
              portId: 'in2',
              portColor: '#000',
              protText: 'RE_in',
              margin: new go.Margin(10, 225, 10, 0)
            },
            {
              portId: 'in3',
              portColor: '#000',
              protText: 'RE_in',
              margin: new go.Margin(10, 225, 10, 0)
            },
            {
              portId: 'in4',
              portColor: '#000',
              protText: 'RE_in',
              margin: new go.Margin(10, 225, 10, 0)
            }
          ],
          source: './img/矩阵截图.jpg' // ./ 是plubic目录
        },
        {
          key: '信号存储分析处理设备',
          deviceStatus: this.colorList[this.deviceStatus.serverStatus].color,
          background: 'transparent',
          height: 100,
          textMargin: new go.Margin(0, 5, 45, 5),
          textColor: '#f5f5f5',
          // picMargin: new go.Margin(30, 10, 15, 10),
          loc: '400 0',
          topArray: [
            {
              portId: 'in2',
              portColor: '#000',
              margin: new go.Margin(10, 0, 90, 20)
            },
            {
              portId: 'out1',
              portColor: '#000',
              margin: new go.Margin(10, 0, 90, 20)
            },
            {
              portId: 'out2',
              portColor: '#000',
              margin: new go.Margin(10, 0, 90, 20)
            }
          ],
          bottomArray: [
            {
              portId: 'in1',
              portColor: '#000',
              margin: new go.Margin(90, 0, 10, 20)
            }
          ],
          /* rightArray: [
            {
              portId: 'out3',
              portColor: '#000'
            }
          ], */
          source: './img/存储截图.jpg' // ./ 是plubic目录
        },
        // #region
        /* {
          key: 'xx分析人员',
          width: 180,
          height: 200,
          textMargin: new go.Margin(182, 0, 0, 0),
          leftWidth: 180,
          loc: '700 0',
          leftArray: [
            {
              portId: 'in1',
              portColor: '#000',
              textColor: '#000',
              margin: new go.Margin(10, 120, 10, 0),
              width: 230
            }
          ],
          source: './img/user.png' // ./ 是plubic目录
        }, */
        // #endregion
        {
          key: '高速DVB信号解调设备',
          deviceStatus: this.colorList[this.deviceStatus.mechaniDVBStatus].color,
          background: 'transparent',
          height: 100,
          textMargin: new go.Margin(0, 5, 55, 5),
          textColor: '#f5f5f5',
          // picMargin: new go.Margin(30, 15, 15, 15),
          loc: '100 200',
          leftArray: [
            { portId: 'in1', portColor: '#000' },
            { portId: 'in2', portColor: '#000' }
          ],
          rightArray: [
            {
              portId: 'out1',
              portColor: '#000',
              margin: new go.Margin(20, 0, 10, 235)
            }
          ],
          source: './img/dvb截图.jpg' // ./ 是plubic目录
        },
        {
          key: '卫星上行信号侦察天线',
          loc: '-600, 230',
          textMargin: new go.Margin(80, 5, 0, 5),
          // textColor: '#f5f5f5',
          deviceStatus: '#67c23a',
          background: 'transparent',
          // background: '#fafafa',
          // picWidth: 200,
          height: 200,
          picHeight: 200,
          topArray: [
            {
              portId: 'out1',
              portColor: '#000',
              textColor: '#000',
              margin: new go.Margin(0, 0, 175, 90)
            }
          ],
          source: './img/喇叭天线002.JPG' // ./ 是plubic目录
        }
      ]

      const linkDataArray = [
        {
          from: '高速DVB信号解调设备',
          to: '信号存储分析处理设备',
          fromPort: 'out1',
          toPort: 'in1',
          color: '#c24334',
          thick: 2,
          text: '光纤'
        },
        {
          from: 'L频段信号交换矩阵',
          to: '高速DVB信号解调设备',
          fromPort: 'out2',
          toPort: 'in1',
          color: '#000',
          thick: 2
        },
        {
          from: 'L频段信号交换矩阵',
          to: '高速DVB信号解调设备',
          fromPort: 'out1',
          toPort: 'in2',
          color: '#000',
          thick: 2,
          fromEndSegmentLength: 150
        },
        {
          from: 'L频段信号交换矩阵',
          to: '宽带信号采集设备',
          fromPort: 'out3',
          toPort: 'in1',
          color: '#000',
          thick: 2
        },
        {
          from: 'L频段信号交换矩阵',
          to: '宽带信号采集设备',
          fromPort: 'out4',
          toPort: 'in2',
          color: '#000',
          thick: 2,
          text: '射频'
        },
        {
          from: '宽带信号采集设备',
          to: '信号存储分析处理设备',
          fromPort: 'out1',
          toPort: 'in2',
          color: '#000',
          thick: 2
        },
        {
          from: '信号存储分析处理设备',
          to: 'L频段信号交换矩阵',
          fromPort: 'out1',
          toPort: 'in1',
          color: '#0059e9',
          thick: 2,
          fromEndSegmentLength: 220,
          text: '千兆网络'
        },
        {
          from: '信号存储分析处理设备',
          to: '可搬移式2.4米快速跟踪天线',
          fromPort: 'out2',
          toPort: 'in1',
          color: '#0059e9',
          thick: 2,
          text: '千兆网络'
          // fromEndSegmentLength: 300
        },
        /* {
          from: '信号存储分析处理设备',
          to: 'xx分析人员',
          fromPort: 'out3',
          toPort: 'in1',
          color: '#000',
          thick: 2
        }, */
        {
          from: '可搬移式2.4米快速跟踪天线',
          to: 'L频段信号交换矩阵',
          fromPort: 'out2',
          toPort: 'in2',
          color: '#000',
          thick: 2,
          text: '下行信号1',
          fromEndSegmentLength: 60
        },
        {
          from: '可搬移式2.4米快速跟踪天线',
          to: 'L频段信号交换矩阵',
          fromPort: 'out1',
          toPort: 'in3',
          color: '#000',
          thick: 2,
          text: '下行信号2'
        },
        {
          from: '卫星上行信号侦察天线',
          to: 'L频段信号交换矩阵',
          fromPort: 'out1',
          toPort: 'in4',
          color: '#000',
          thick: 2,
          text: '上行信号'
        }
      ]

      // 添加节点和连线
      this.diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
      // 设置模型的连线从port出发和接入
      this.diagram.model.linkFromPortIdProperty = 'fromPort'
      this.diagram.model.linkToPortIdProperty = 'toPort'
    },
    async searchMachineStatus () {
      try {
        const { data } = await searchMachineStatusAPI({})
        // console.log('设备状态信息', data)
        if (data != null) {
          if (data.mechanicalMatrixStatus != null) {
            this.deviceStatus.mechanicalMatrixStatus =
              data.mechanicalMatrixStatus
          }
          if (data.serverStatus != null) {
            this.deviceStatus.serverStatus = data.serverStatus
          }
          if (data.mechaniDVBStatus != null) {
            this.deviceStatus.mechaniDVBStatus = data.mechaniDVBStatus
          }
          if (data.mechaniPinpuStatus != null) {
            this.deviceStatus.mechaniPinpuStatus = data.mechaniPinpuStatus
          }
          if (data.antennaStatus != null) {
            this.deviceStatus.antennaStatus = data.antennaStatus
          }

          if (data.mechanicalMatrixMsg) {
            this.deviceInfo.mechanicalMatrixMsg = data.mechanicalMatrixMsg
          }
          if (data.serverMsg) this.deviceInfo.serverMsg = data.serverMsg
          if (data.dvbmsg) this.deviceInfo.mechaniDVBMsg = data.dvbmsg
          if (data.mechaniPinpuMsg) {
            this.deviceInfo.mechaniPinpuMsg = data.mechaniPinpuMsg
          }
          if (data.antennaMsg) this.deviceInfo.antennaMsg = data.antennaMsg
        }
        /* const { data: { data: data1 } } = await axios({
          url: '/other_api/getStatus',
          method: 'get'
        })
        // console.log('天线状态', data1.status)
        if (data1.status != null) {
          this.deviceStatus.antennaStatus = data1.status
        } */
      } catch (error) {
        console.log(error)
      } finally {
        this.linkTuoPu()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  padding: 10px 15px;
  height: calc(100vh - 50px);
  // background-color: pink;
  display: flex;
  position: relative;
  padding: 10px;

  .diagramDiv {
    width: 100%;
    // flex: 0 0 500px; /* 设置左侧盒子固定宽500px 不允许收缩 */
    height: 100%;
    background-color: #fff;
    border: 1px solid #797979;
    border-radius: 5px;
  }

  .legend {
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 99;

    height: 30px;
    display: flex;
    align-items: center;

    font-weight: 700;
    font-size: 18px;

    .item {
      width: 100px;
      margin-right: 10px;
      display: flex;
      align-items: center;

      .icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 3px;
      }

      .value {
        font-size: 16px;
      }
    }
  }

  .warningInfo {
    position: absolute;
    right: 15px;
    bottom: 15px;
    min-width: 300px;
    padding: 5px;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 18px;
      font-weight: 700;
      height: 28px;
      line-height: 28px;
    }

    .item {
      text-align: left;
      height: 24px;
      line-height: 24px;
    }
  }
}
</style>
